<script setup>
import { countDeviceNum } from "@/api";
import Chart from "@/components/Chart/index.vue";
import textNumCol from "@/components/text-num-col";
const options = ref({});
options.value = {
    color: ["#002a94", "#6eb5ef", "#ffce00", "#FF00FF", "#47ffff", "#8630f5"],
    title: {
        text: "摄像头总数(个)",
        left: "center",
        textStyle: {
            color: "#fff",
            fontSize: 20,
        },
        padding: 0,
        top: 5,
    },
    tooltip: {
        trigger: "item",
    },
    series: [
        {
            type: "pie",
            radius: ["40%", "60%"],
            data: [
                { value: 1048, name: "津安热电" },
                { value: 735, name: "天津热电" },
                { value: 735, name: "城安热电" },
                { value: 735, name: "港益供热" },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
            },
            label: {
                // formatter: '{a|{b}}\n  {b|{c}}{per|万㎡} ',
                position: "outside",
                formatter: "{a|{b}}\n  {b|{c}}",
                backgroundColor: "#0b1c35",
                borderColor: "inherit",
                borderWidth: 1,
                fontSize: 20,
                borderRadius: 4,
                rich: {
                    a: {
                        color: "#fff",
                        padding: [7, 5, 0],
                        lineheight: "30px",
                        fontSize: 20,
                        align: "center",
                    },
                    b: {
                        color: "#03e5fa",
                        fontSize: 20,
                        fontWeight: "bold",
                        padding: [3, 4],
                        align: "left",
                    },
                    per: {
                        fontSize: 20,
                        align: "left",
                    },
                },
            },
            labelLine: {
                length: 15,
                length2: 60,
                maxSurfaceAngle: 80,
            },
        },
    ],
};
onMounted(() => {
    // echarts初始化
});
const grData = {};
const getData = () => {
    const gongre = [
        [
            {
                num: 210,
                name: "视频总数",
                unit: "个",
                span: 6,
            },
            {
                num: 1000.11,
                name: "换热站视频",
                unit: "个",
                span: 6,
            },
            {
                num: 1000.11,
                name: "铁塔视频",
                unit: "个",
                span: 6,
            },
            {
                num: 10000.11,
                name: "营业厅视频",
                unit: "个",
                span: 6,
            },
        ],
    ];
    grData.value = {
        value: gongre,
    };
};
getData();
</script>

<template>
    <div class="right-top flex">
        <textNumCol :datas="grData">
            <Chart
                :width="'600px'"
                :height="'200px'"
                :option="options"
                id="pieRef3"
            />
        </textNumCol>
    </div>
</template>
